<template>
    <div>
        <!--        查询-->
        <div class="ss">
            <div id="shousuo">
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button style="float: right"
                           type="primary"
                           @click="onSubmit()"
                           size="small">查询搜索
                </el-button>
                <el-button
                        style="float: right"
                        @click="handleResetSearch()"
                        size="small">重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="formInline" class="demo-form-inline"
                         style="text-align: left;margin-left:20px">
                    <el-form-item label="">
                        <el-select checked v-model="formInline.region" placeholder="搜索类型">
                            <el-option label="下单业务员" value="createBy"></el-option>
                            <el-option label="订单类型" value="orderType"></el-option>
                        </el-select>
                        <!--<el-date-picker
                                 v-model="time"
                                 @change="dateChangebirthday1"
                                 type="date"
                                 value-format="yyyy-MM-dd"
                                ></el-date-picker>-->

                    </el-form-item>
                    <el-form-item label="搜索内容：" style="line-height:10px">
                        <el-input v-model="formInline.input" placeholder="请输入搜索内容"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!--        表格-->
        <div style="margin-top: 15px">
            <el-table
                    :data="currentData"
                    style="width: 100%"
                    border>
                <el-table-column
                        prop="createTime"
                        label="下单时间"
                        :formatter="dateFormatter"
                >
                </el-table-column>
                <el-table-column
                        prop="createBy"
                        label="下单业务员"
                >
                </el-table-column>
                <el-table-column
                        prop="orderType"
                        label="订单类型"

                >
                </el-table-column>
                <el-table-column
                        prop="seatsId"
                        label="餐桌号"
                >
                </el-table-column>
                <el-table-column
                        prop="totalPrice"
                        label="订单价格"
                >
                </el-table-column>
            </el-table>
        </div>
        <!--        分页-->
        <div class="block" style="margin-top: 15px" v-if="flag">
            <!--
                  background---设置背景颜色
                  hide-on-single-page---只有一页时隐藏分页
                  :total---总数据数量
                  :page-size---每页显示数据的条数
                  :pager-count---最大可见页码数
                  @current-change---currentPage改变时会触发(会自动获得页码)
                  :current-page---当前页
            -->
            <el-pagination
                    background
                    hide-on-single-page
                    layout="prev, pager, next"
                    :total="pageNum"
                    :page-size="pageSize"
                    :pager-count="pageCount"
                    @current-change="changePage"
                    :current-page="this.$store.state.cjStore.tablePage"
            ></el-pagination>
        </div>
    </div>

</template>

<script>
    import http from '../../http/http'
    import {mapActions} from 'vuex'

    export default {
        name: "dingDanChaXun",
        data() {
            return {
                currentPage: 1,
                pageSize: 5,
                pageCount: 7,
                formInline: {
                    region: '',
                    input: ''
                },
                flag: true,
                // search:'',

            }
        },
        // watch:{},
        created() {
            console.log('获取全部数据');
            // console.log(sessionStorage)
            this.getOrder();
        },
        computed: {
            currentData() {
                let start = (this.currentPage - 1) * this.pageSize;
                let end = this.currentPage * this.pageSize;
                // this.ddData.forEach(item => {
                //     for (let i = 0; i < myzwNum.length; i++) {
                //         if (item.jobName == myzwNum[i].jobName) {
                //             item.num = myzwNum[i].数量;
                //             return;
                //         } else {
                //             item.num = 0;
                //         }
                //     }
                // });
                return this.$store.state.cjStore.ddData.slice(start, end)
            },
            pageNum() {
                return this.$store.state.cjStore.ddData.length;
            },
        },
        methods: {
            ...mapActions(['getOrder', '']),

            // 搜索查询
            onSubmit() {
                if (this.formInline.region != "" && this.formInline.input != "") {
                    if (this.formInline.region == '下单业务员') {
                        http({
                            url: '/website/Employeecontroller/selectDiningOrderMain',
                            method: 'post',
                            data: {
                                inputValue: this.formInline.input,
                                selectValue: 'createBy'
                            }
                        }).then(res => {
                            this.$store.state.cjStore.ddData = res.data
                            console.log(res.data)
                        })
                    }
                    if (this.formInline.region == '订单类型') {
                        http({
                            url: '/website/Employeecontroller/selectDiningOrderMain',
                            method: 'post',
                            data: {
                                inputValue: this.formInline.input,
                                selectValue: 'orderType'
                            }
                        }).then(res => {
                            this.$store.state.cjStore.ddData = res.data
                            console.log(res.data)
                        })

                    }
                } else {
                    console.log('select未选中或input未输入');
                    this.$confirm("您的查询内容为空！请重新检查后再输入！", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: '取消',
                        type: "warning"
                    }).then(() => {
                        console.log('')
                    }).catch(() => {
                            console.log('取消')
                        }
                    );
                }

            },

            //重置
            handleResetSearch() {
                this.formInline.input = "";
                this.formInline.region = "";
                this.getOrder();
            },

            //分页
            changePage(val) {
                this.currentPage = val;
            },

            //时间
            dateFormatter(row, column) {
                let datetime = row.createTime;
                if (datetime) {
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + "-";
                    let mon = datetime.getMonth() + 1 + "-";
                    let d = datetime.getDate();
                    let h = datetime.getHours() + "-";
                    let m = datetime.getMinutes();

                    // return y + mon + d ;
                    return y + mon + d + ' ' + h + m;
                }
                return "";
            },
        }
    }
</script>

<style scoped lang="less">
    .block {
        left: 40%;
        height: 32px;
    }

    #shousuo {
        text-align: left;
        width: 100%;
        padding-left: 10px;
    }

    #shousuo > button {
        margin-right: 30px;
        margin-top: 20px;
    }

    .ss {
        background-color: white;

        width: 100%;
        margin-bottom: 10px;
        height: 138px;
        line-height: 50px;
    }
</style>